<template>
    <div class="avue-top">
        <div class="top-bar__left">
            <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
                 v-if="setting.collapse&&!isHorizontal">
                <i class="icon-navicon" @click="setCollapse"></i>
            </div>
        </div>
        <div class="top-bar__title">
            <div class="top-bar__item top-bar__item--show" v-if="setting.menu">
                <top-menu ref="topMenu"></top-menu>
            </div>
            <span class="top-bar__item" v-if="setting.search">
                 <top-search></top-search>
           </span>
        </div>
        <!--  顶部按钮 -->
        <div class="top-bar__right">
            <!-- 主题颜色 -->
            <el-tooltip v-if="setting.color"
                        effect="dark"
                        :content="$t('navbar.color')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-color></top-color>
                </div>
            </el-tooltip>
            <!-- 日志 -->
            <el-tooltip v-if="setting.debug"
                        effect="dark"
                        :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-logs></top-logs>
                </div>
            </el-tooltip>
            <!-- 锁屏 -->
            <el-tooltip v-if="setting.lock"
                        effect="dark"
                        :content="$t('navbar.lock')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-lock></top-lock>
                </div>
            </el-tooltip>
            <!-- 主题 -->
            <el-tooltip v-if="setting.theme"
                        effect="dark"
                        :content="$t('navbar.theme')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <top-theme></top-theme>
                </div>
            </el-tooltip>
            <!-- 消息 -->
            <el-tooltip effect="dark"
                        :content="$t('navbar.notice')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <!-- <top-notice></top-notice>-->
                    <top-msg></top-msg>
                </div>
            </el-tooltip>
            <!-- 语言 -->
            <el-tooltip effect="dark"
                        :content="$t('navbar.language')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <top-lang></top-lang>
                </div>
            </el-tooltip>
            <!-- 全屏 -->
            <el-tooltip v-if="setting.fullscren"
                        effect="dark"
                        :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                        placement="bottom">
                <div class="top-bar__item">
                    <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
                       @click="handleScreen"></i>
                </div>
            </el-tooltip>
            <!-- 头像-->
            <img class="top-bar__img" :style="isOnline?'border: 1px solid #eee' : 'border: 1px solid red' " :src="userInfo.headPic">
            <!-- 下拉菜单  -->
            <el-dropdown>
                 <span class="el-dropdown-link">  {{ userInfo.fullName }}
                     <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                <el-dropdown-menu slot="dropdown">
                    <!--    <el-dropdown-item>-->
                    <!--      <router-link to="/">{{$t('navbar.dashboard')}}</router-link>-->
                    <!--    </el-dropdown-item>-->
                    <el-dropdown-item>
                        <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
                    </el-dropdown-item>
                    <!--    <el-dropdown-item>-->
                    <!--      <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>-->
                    <!--    </el-dropdown-item>-->
                    <el-dropdown-item @click.native="logout"
                                      divided>{{ $t('navbar.logOut') }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import {mapGetters} from "vuex";
import {fullscreenToggel, listenfullscreen} from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topNotice from './top-notice'
import topMsg from './top-msg'
import topLang from "./top-lang";

export default {
    components: {
        topLock,
        topMenu,
        topSearch,
        topTheme,
        topLogs,
        topColor,
        topNotice,
        topMsg,
        topLang
    },
    name: "top",
    data() {
        return {
            isOnline: false,
        };
    },
    filters: {},
    created() {
        this.checkWebSocketState();
    },
    mounted() {
        listenfullscreen(this.setScreen);
    },
    computed: {
        ...mapGetters([
            "setting",
            "userInfo",
            "isFullScren",
            "tagWel",
            "tagList",
            "isCollapse",
            "tag",
            "logsLen",
            "logsFlag",
            "isHorizontal"
        ])
    },
    methods: {
        handleScreen() {
            fullscreenToggel();
        },
        setCollapse() {
            this.$store.commit("SET_COLLAPSE");
        },
        setScreen() {
            this.$store.commit("SET_FULLSCREN");
        },
        logout() {
            this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                confirmButtonText: this.$t("submitText"),
                cancelButtonText: this.$t("cancelText"),
                type: "warning"
            }).then(() => {
                this.$store.dispatch("LogOut").then(() => {
                    // 退出 websocket
                    this.$store.dispatch('webSocketOut');
                    // 跳转登录页
                    this.$router.push({path: "/login"});
                });
            });
        },

        say2(content) {
            const ssu = new SpeechSynthesisUtterance();
            ssu.text = content;
            ssu.lang = 'zh';
            ssu.rate = 0.8;
            speechSynthesis.speak(ssu);
        },
        /**
         * 检查 websocket 在线状态
         * 调用者 this
         * 调用者 this 需存在 isOnline 参数, 改方法实时变更 isOnline 值 (利用 vue 双向绑定机制), 在线 true / 不在线 false
         */
        async checkWebSocketState() {
            let thin = this;
            setInterval(() => {
                // console.log("websocket在线状态:" + thin.socket.readyState)
                if (thin.$store.getters.ws.readyState === WebSocket.OPEN) {
                    thin.isOnline = true;
                } else if (thin.$store.getters.ws.readyState === WebSocket.CLOSED) {
                    thin.isOnline = false;
                }
            }, 2000)
        },
    }
};
</script>

<style lang="scss" scoped>
</style>